<template>
  <div id="tmpl">
    <div class="cate">
      <ul :style="'width:'+ulWidth+'px'">
        <li @click="getImgs(0)">全部</li>
        <li v-for="item in cates" @click="getImgs(item.id)">{{item.title}}</li>
      </ul>
    </div>
    <!-- 图片列表 -->
    <div class="imglist">
      <ul>
        <li v-for="item in imgslist">
          <router-link :to="'/photo/photoinfo/'+item.id">
            <img v-lazy="item.img_url">
            <div class="description">
              <h5 v-text="item.title"></h5>
              <p v-text="item.zhaiyao"></p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import common from "../kits/common.js"
import { Toast } from 'mint-ui';
export default {
  data(){
    return {
      cates:[],
      ulWidth:320,
      imgslist:[]
    }
  },
  created(){
    this.getcates();
    var all = 0;
    this.getImgs(all);
  },
  methods:{
    getcates(){
      var url = common.domain + "/api/getimgcategory";
      this.$http.get(url).then(function(response){
        var data = response.body;
        if(data.status != 0){
          Toast(data.message);
          return;
        }
        var w = 68;
        var count = data.message.length + 1;
				this.ulWidth = w * count ;
        this.cates = data.message;
      })
    },
    getImgs(catesid){
      catesid = catesid || 0;
      var url = common.domain + "/api/getimages/" + catesid;
      this.$http.get(url).then(function(response){
        var data = response.body;
        if(data.status != 0){
          Toast(data.message);
          return;
        }
        this.imgslist = data.message;
      })
    }
  }




}
</script>

<style scoped>
.cate{
  max-width: 640px;
  overflow-x: scroll;
}
.cate ul {
  width: 600px;
  margin: 0;
  padding-left: 5px;
}
.cate li{
  list-style: none;
  display: inline-block;
  padding: 0 6px;
  font-size: 14px;
}
.imglist image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.imglist ul{
  margin: 0;
  padding: 0;
}
.imglist li{
  list-style: none;
  position: relative;
  margin: 5px 0;
}
.imglist img{
  width: 100%;
  height: 300px;
  vertical-align: bottom;
}
.description{
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .3)
}
.description h5{
  color: #fff;
}
.description p{
  color: #fff;
  height: 40px;
  overflow-y:auto;
}
</style>

